<template>
	<uxt-bar
		:classes="classes"
		:styles="styles"
		:color="color"
		:bg-color="bgColor"
		:icon="icon"
		:title="title"
		:desc="desc"
		:box="box"
		:round="round"
		:radius="radius"
		:focus="focus1"
		:title-width="titleWidth"
        :col="col"
	>
		<template slot="left">
            <text
                class="text-red"
                v-if="star"
            >*</text>
			<slot name="left"></slot>
		</template>
		<template slot="right" class="flex-sub">
			<uxt-input
                class="width-p100"
                :classes="`flex-sub width-p100${!box && col ? '' : ' padding-left-sm'}`"
                :name="name"
				:confirm-type="confirmType"
				:focus="focus"
				:maxlength="maxlength"
				:placeholder="placeholder"
				:placeholder-color="placeholderColor"
				:selection="selection"
				:type="type"
				:value="value"
				:disabled="disabled"
                :clearable="clearable"
                :auto-height="autoHeight"
				@input="handleInput"
				@focus="handleFocus"
				@blur="handleBlur"
				@confirm="$emit('confirm', $event)"
			/>
			<slot name="right"></slot>
		</template>
	</uxt-bar>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import inputMixin from '../mixins/input.js'
import uxtBar from './uxt-bar.vue'
import uxtInput from './uxt-input.vue'

export default {
	name: 'uxt-input-bar',
	mixins: [baseMixin, barMixin, rrMixin, inputMixin],
	components: {
		uxtBar,
		uxtInput
	},
	props: {
		name: {
			type: String
		},
		value: {
			type: String,
			default: ''
		},
        // 红星
        star: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
		bgColor: {
			default: 'white'
		}
	},
	data() {
		return {
			focus1: this.focus
		}
	},
	watch: {
		focus(newVal, oldVal) {
			this.focus1 = newVal
		}
	},
	methods: {
		handleFocus(e) {
			this.focus1 = true
			this.$emit('focus', e)
		},
		handleBlur(e) {
			this.focus1 = false
			this.$emit('blur', e)
		},
		handleInput(value) {
			this.$emit('input', value)
		}
	}
}
</script>

<style lang="scss" scoped>
.input {
	font-size: inherit;
}
</style>
